<template>
    <div class="icontent">
        <h3>Beatop | 游学团视频</h3>
        <el-row>
            <el-select v-model="value" placeholder="请选择游学团" @change="my_change">
                <el-option v-for="(data,index) in tour_list" :key="index" :label="data[1]" :value="data[0]"/>
            </el-select>
        </el-row>
        <br>
        <div class="video-div">
            <div class="my-youxue-img" v-for="(v_data,v_index) in vdieo_list" :key="v_index">
                <video class="my-youxue-video" :src="v_data.fileUrl" controls="controls">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>
        <!-- <el-row>
            <div class="block">
                <br>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="my_pagination.page"
                    :page-sizes="[10, 20, 60, 100]"
                    :page-size="my_pagination.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_tatol">
                </el-pagination>
            </div>
        </el-row> -->
    </div>
</template>

<script>
    import Vue from 'vue';
    import { getTourList, getTourVideo } from '@/api/login'

    export default {
        name: "useraccount",
        data () {
            return {
                user_data: {},
                value: '',
                my_pagination: {
                    page: 1,
                    page_size: 10,
                    search_type: '1',
                    keyword: ''
                },
                page_tatol: 100,
                tour_list: [],
                vdieo_list: []
            }
        },
        methods: {
            get_video(id){
                getTourVideo(id).then(response => {
                    var data = response
                    this.vdieo_list = response
                }).catch(error => {
                    console.log(error)
                })
            },
            get_list(){
                getTourList().then(response => {
                    var data = response
                    // console.log(data)
                    this.tour_list = response
                    this.get_video(response[0][0])
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
                this.my_pagination.page_size = val
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`)
                this.my_pagination.page = val
            },
            my_change(val) {
                // console.log(val)
                this.get_video(val)
            }
        },
        created: function() {
            this.get_list()
        }
    }
</script>

<style scoped>
    body{
        background-color: #F5F5F5 !important;
    }
    .icontent{
        width: 90%;
        margin: 5% 5% 5% 5%;
    }
    .video-div{
        /* overflow: hidden; */
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari 和 Chrome */
        column-count:4;
        /* -moz-column-gap: 2em; */
        /* -webkit-column-gap: 2em; */
        /* column-gap: 2em; */
        width: 100%;
        /* margin:2em auto; */
    }
    .my-youxue-img{
        /* width: 25%; */
        /* float: left; */
        /* padding: 2em; */
        /* margin-bottom: 2em; */
        -moz-page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }
    .my-youxue-video{
        width: 100%;
        margin-bottom: 20px;
    }
</style>